<template>
	<view class="creator">
		<view class="avatar" @click="toHularIntro">
			<image mode="aspectFill" :src="userInfo.avatar" />
		</view>

		<view class="info">
			<view class="nickname">
				{{userInfo.nickname}}
			</view>
			<view class="summary">
				{{userInfo.summary}}
			</view>
		</view>
		<view v-if="userInfo.isFollowed" style="color: #c3c3c3;border-color:#c3c3c3;" class="button"
			@click="changeFollowStatus">已关注 </view>
		<view style="font-weight: bold;" v-else :style="{'color':themeColor,'border-color':themeColor}" class="button"
			@click="changeFollowStatus">关注 </view>
	</view>
</template>

<script>
	export default {
		name: "creator-card",
		data() {
			return {
				userRoles: ["候浪者", "浪者", "飓风", "暗流"]
			};
		},
		props: {
			userInfo: {
				type: Object,
				default: function() {
					return {
						nickname: "",
						isFollowed: 0,
						avatar: ""
					}
				},
			},
			themeColor: {
				type: String,
				default: "#9e9e9e",
			}
		},
		methods: {
			changeFollowStatus() {
				if (!this.$isLogin()) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				} 
				this.$api.changeUserFollowStatus({
					id: this.userInfo.id
				}).then(() => {
					console.log("改变元素属性")
					this.userInfo.isFollowed = !this.userInfo.isFollowed
				})
			},
			toHularIntro() {
				if (!this.$isLogin()) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages_self/hula/hula-intro?userId=' + this.userInfo.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.creator {
		width: 670rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
		}

		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 380rpx;
			height: 90rpx;

			.nickname {
				font-size: 36rpx;
			}

			.summary {
				font-size: 28rpx;
				color: gray;

				/*超过范围进行隐藏不显示*/
				overflow: hidden;
				/*文本溢出, 使用省略号 */
				text-overflow: ellipsis;
				/*连续的空白符会被合并,但文本内的换行无效*/
				white-space: nowrap;
			}

		}

		.button {
			width: 140rpx;
			height: 60rpx;

			border: solid thin #9e9e9e;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: #9e9e9e;
			border-radius: 50rpx;

			font-size: 28rpx;
		}

	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
